<template>
  <div class="visualization-panel">
    <cesium-map v-show="!modelPreviewShow" ref="cesiumMap"></cesium-map>
    <layer-panel ref="layerPanel"></layer-panel>
    <div class="model-dialog" v-if="modelPreviewShow" v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <div id="modelBorder"></div>
      <div id="modelBox"></div>
      <el-button type="primary" icon="el-icon-arrow-left" circle class="left" v-if="controlShow"
        @click="previous"></el-button>
      <el-button type="primary" icon="el-icon-arrow-right" circle class="right" v-if="controlShow"
        @click="next"></el-button>
    </div>
    <!-- 工具 -->
    <div class="tool-box" v-if="!modelPreviewShow">
      <div style="display: flex;justify-content: space-between;align-items: center;">
        开启网格：
        <el-switch v-model="gridOpen" :active-value="true" :inactive-value="false" @change="switchChange">
        </el-switch>
      </div>
      <div style="display: flex;justify-content: space-between;align-items: center;">
        底图开关：
        <el-switch v-model="baseMapSwitch" :active-value="true" :inactive-value="false" @change="baseMapChange">
        </el-switch>
      </div>
    </div>
  </div>
</template>

<script>
import cesiumMap from '../map/cesiumMap'
import layerPanel from './layerPanel.vue'
import modelMixins from './modelPreview'
export default {
  mixins: [modelMixins],
  data () {
    return {
      gridOpen: false,
      modelPreviewShow: false,
      controlShow: false,
      gltfList: [],
      gltfIndex: 0,
      loading: false,
      baseMapSwitch: true
    };
  },
  components: {
    cesiumMap,
    layerPanel
  },
  methods: {
    baseMapChange () {
      this.$refs.cesiumMap.imageLayer.show = this.baseMapSwitch
    },
    switchChange () {
      this.$refs.layerPanel.showGrid(this.gridOpen)
    },
    showGltf (list) {
      this.modelPreviewShow = true
      this.gltfList = list
      if (list.length > 1) {
        this.controlShow = true
      }
      this.init()
    },
    previous () {
      this.gltfIndex--
      if (this.gltfIndex < 0) {
        this.gltfIndex = this.gltfList.length - 1
      }
      this.init()
    },
    next () {
      this.gltfIndex++
      if (this.gltfIndex >= this.gltfList.length) {
        this.gltfIndex = 0
      }
      this.init()
    },
    init () {
      this.loading = true
      this.modelUrl = this.gltfList[this.gltfIndex]
      this.removeAllModels()
      this.$nextTick(() => {
        setTimeout(() => {
          this.initGlbModel();
          this.animate();
          this.pauseRotation();
        }, 1000)
      })
    }
  },
  created () {
  },
  mounted () {
  }
};
</script>
<style lang="less" scoped>
.visualization-panel {
  width: 100%;
  height: 100%;
  position: relative;

  .tool-box {
    width: 150px;
    height: 50px;
    box-sizing: border-box;
    padding: 0 5px;
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    // border-radius: 10px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }

  .model-dialog {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;

    #modelBorder {
      max-width: 512px;
      width: 100%;
      height: 50%;
    }

    .left {
      position: absolute;
      bottom: 50px;
      left: 10px
    }

    .right {
      position: absolute;
      bottom: 50px;
      right: 10px
    }

    #modelBox {
      width: 100%;
      height: 100%;
      position: absolute
    }

    canvas {
      position: absolute;
      top: 0%;
      left: 0%;
    }
  }
}
</style>